<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
    <mdl-layout-content>
        <div class="content-background"></div>
        <!--登录窗口-->
        <form [formGroup]="form">
            <mdl-card mdl-shadow="24">
                <mdl-card-title>
                    <h2 mdl-card-title-text>欢迎使用</h2>
                </mdl-card-title>
                <mdl-card-supporting-text>
                    <mdl-textfield type="text" label="用户名" formControlName="username" autofocus floating-label></mdl-textfield>
                    <mdl-textfield type="password" label="密码" formControlName="password" (keypress)="$event.charCode==13?login():0" floating-label></mdl-textfield>
                </mdl-card-supporting-text>
                <mdl-card-actions mdl-card-border>
                    <span class="status-bar">
                        <mdl-spinner [active]="processingLogin"></mdl-spinner>
                        <div class="status-info">{{statusMessage}}</div>
                    </span>
                    <button type="button" mdl-button (click)="login()" [disabled]="!form.valid || processingLogin" mdl-button-type="raised" mdl-colored="primary"
                        mdl-ripple>登录</button>
                </mdl-card-actions>
                <mdl-card-menu>
                    <i class="fa fa-lock" aria-hidden="true"></i>
                </mdl-card-menu>
            </mdl-card>
        </form>
        <!--工具栏-->
        <div class="app-qrcode-area">
            <div class="app-qrcode">
                <img [src]="appUrl">
            </div>
            <div class="app-qrcode-bar"></div>
        </div>
        <div class="app-bgimage-detail">
            <div class="app-bgimage-image">
                <img [src]="currentBackgroundPage.bgImage">
            </div>
            <div class="app-bgimage-title">{{currentBackgroundPage.title}}</div>
            <p class="app-bgimage-desc">{{currentBackgroundPage.description}}</p>
        </div>
        <div class="tools-item">
            <div class="bg-info icon-item" (click)="toggleBgDetail()" title="{{currentBackgroundPage.title}}">
                <i class="fa fa-info" aria-hidden="true"></i>
            </div>
            <div class="qr-code icon-item" title="扫一扫下载APP" (click)="toggleQrCode($event)">
                <i class="fa fa-qrcode" aria-hidden="true"></i>
            </div>
            <div class="bg-per icon-item" title="上一张背景图片" (click)="changeBgImage('per',$event)">
                <i class="fa fa-chevron-left" aria-hidden="true"></i>
            </div>
            <div class="bg-next icon-item" title="下一张背景图片" (click)="changeBgImage('next', $event)">
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
            </div>
        </div>
        <div class="footer">
            <span>© 2017  &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; Designed By Minglong.Tao</span>
        </div>
    </mdl-layout-content>
</mdl-layout>
